<script>
/**
 * 登陆日志
 * @author:Mumu
 * @Data 2022/09/13
 */
export default {
	components:{

	},
	data(){
		return {
			field:[
			// 	{
			// 	title: '',
			// 	width:'30px',
			// 	slots: { customRender: 'checked' }
			// },
			{
				title: '#',
				width:'35px',
				customRender: ({index}) => index+1
			}, {
				title: '最近使用时间',
				dataIndex: 'usetime',
			},{
				title: '会员名',
				dataIndex: 'nikcname'
			}, {
				title: '手机号',
				dataIndex: 'mobilephone',
			},{
				title: '角色',
				dataIndex: 'rolename',
			},{
				title: '累计登陆次数',
				dataIndex: 'a1',
			}],//表头
			list:[{nikcname:'网闸'}],//列表
			pagination: {
				defaultCurrent: 1,
				current: 1,
				defaultPageSize: 10,
				pageSize: 10,
				showQuickJumper: true,
				showSizeChanger: true,
				showTotal: (total, range) => `共${total}条`,
				total: 0,
			},
			listloading:false,
			search:{},
			rolelist:[],
			exportloading:false,
		}
	},
	mounted() {
		this.$nextTick(()=>{
			// this.getList();
		})
	},
	methods:{
		async getList() {
			if(this.listloading) return;
			this.listloading		=	true;
			let rs	=	await this.muajax.userList({
				...this.search,
				page:this.pagination.current,
				size:this.pagination.pageSize,
			});
			this.listloading		=	false;
			// if (rs.status!=200) return;
			if ( this.pagination.current == 1 ){
				this.records		=	[];
			}
			this.list=rs.data;
			this.pagination.total=rs.sum;
		},//列表
		research(){
			this.pagination.current=1;
			this.getList();
		},//搜索重置
		applysDataTableChangeHandle(pagination, filters, sorter,ee) {
			console.log(pagination, filters, sorter,ee)
			this.pagination.current		= pagination.current;
			this.pagination.pageSize	= pagination.pageSize;
			this.getList();
		},//操作分页控制
		async exportexcel(){
			this.exportloading=true;
			let rs = await this.muajax.userExport(this.search);
			if(rs.status==200){
				let list=[];
				rs.data.forEach(item=>{
					list.push({
						nikcname:item.nikcname,
						mobilephone:item.mobilephone||'',
						rolename:item.rolename||'',
						role:['','无权限','可上传素材','可上传企业品牌内容'][item.role],
						create_time:item.create_time,
						artNum:item.artNum,
						artNumPass:item.artNumPass,
						usedNum:item.usedNum,
						touseNum:item.touseNum,
						remark:item.remark||'',
					})
				})
				this.export_xls('用户列表',{
					field:rs.field,
					list
				});
			}
			this.exportloading=false;
		},//导出
	},
	computed: {

	},
}
</script>
<template>

	<a-card>
		<a-form layout="inline" class="text-center">
			<a-form-item label="搜索">
				<a-input
					v-model:value="search.keyword"
					placeholder="请输入名称或手机号搜索"
					style="width:300px"
				/>
			</a-form-item>
			<a-form-item>
				<a-form-item>
					<a-range-picker
						@change="data=>[search.doctimeStart,search.doctimeEnd]=data"
						format="YYYY/MM/DD"
						valueFormat="YYYY/MM/DD"
						:placeholder="['开始时间','结束时间']"
					/>
				</a-form-item>
			</a-form-item>
			<a-form-item>
				<a-space>
					<a-button type="primary" @click="research()">搜索</a-button>
					<!-- <a-button type="primary" :loading="exportloading" @click="exportexcel()">导出结果</a-button> -->
					<!-- <a-button type="default">重置</a-button> -->
				</a-space>
			</a-form-item>
		</a-form>
		<div class="mm-t-20 mm-b-15">
			<a-space>
				<!--待开发 <a-button type="primary" danger>删除</a-button> -->
			</a-space>
		</div>


		<a-table
			:columns="field"
			:data-source="list"
			:pagination="pagination"
			:loading="listloading"
			:scrollToFirstRowOnChange="true"
			@change="applysDataTableChangeHandle"
			size="small"
			:row-key="(record)=>JSON.stringify(record)"
		>
			<template #checked="{record}">
				<a-checkbox v-model:checked="record.checked"></a-checkbox>
			</template>
			<template #head="{record}">
				<a-avatar :src="record.head" />
			</template>
			<template #iscompany="{record}">
				<a-switch checked-children="是" un-checked-children="否" v-model:checked="record.iscompany" />
			</template>

			<template #action="{record,index}">
				<a-button type="primary" size="small" @click="">查看下级</a-button>
				<a-divider type="vertical" />
				<a-button type="primary" size="small" @click="">设置体验店</a-button>
			</template>
		</a-table>

	</a-card>
</template>
<style lang="less" scoped>
.tabsort{
	width: 100%;
	height: 100%;
	cursor: pointer;
	.sortico{
		display: inline-flex;
		flex-direction: column;
		vertical-align: middle;
		.anticon{
			margin: -2px;
			&.active{
				color: #00c4ff;
			}
		}
	}
}
</style>